<!--系统参数配置-->
<template>
    <div>
        <div class="commonStyle nyContent">
            <div class="commonTit">系统参数配置</div>
            <a-tabs @change="changeTab" :animated="false" >
                <a-tab-pane v-for="item in nacosService" :key="item.serverCode" :tab="item.serverName" :name="item.serverCode">
                    <div style="float: right;  margin-top: -50px;" class="apply-title-btn-wrap">
                        <a-button type="default" @click="addSysConfig"
                                  v-if="hasPermission('sysconfig:addSysConfig')">新增
                        </a-button>
                    </div>
                    <a-table :columns="columns" :dataSource="tableListData"
                             :rowKey="record => record.id"
                             :pagination="false">
                <span slot="index" slot-scope="text, record, index">
                    {{ (page.currentPage - 1) * page.pageSize + index + 1 }}
                </span>
                        <span slot="operation" slot-scope="text" class="table-operation">
                         <a @click="editSysConfig(text)" v-if="editBtnShow ">
                            编辑</a>
                                <a @click="delSysConfig(text.id,text.paramName)" class="adel" v-if="delBtnShow">
                            删除</a>
                </span>
                    </a-table>
                    <Page :totalCount="pageVal.total" :currentPage="pageVal.currentPage" ref="page"
                          :pageSize="pageVal.pageSize" @changePage="changePage"
                          @changePageSize="changePageSize" />
                </a-tab-pane>
            </a-tabs>
        </div>
        <a-row>
            <add-edit ref="addEdit" :title="title" :serverCode="page.serverCode" :nacosService="nacosService"  :sysSetting="sysSetting" @init="init" />
        </a-row>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import addEdit from './addEdit.vue'
    import Page from 'module/pagination'

    export default {
        name: 'sys_setting',
        components: {
            addEdit,
            Page
        },
        data () {
            return {
                title: true,
                showAddTable: false,
                showDelTable: false,
                currentTabName: '',
                currentTabLable: '',
                searchKey: '',
                show: true,
                flags: '',
                access: '0',
                /*选中的记录*/
                checkData: [],
                array: [ 10, 20, 30, 40 ],
                tableListData: [],
                sysSetting: {
                    paramName: '',
                    paramValue: '',
                    paramUnit: '',
                    description: '',
                    sortCode: '',
                    sortName: ''
                },
                editBtnShow: false,
                delBtnShow: false,
                page: {
                    currentPage: 1,
                    pageSize: 10,
                    serverCode:'',
                },
                nacosService:[{serverCode: "micrApp", serverName: "全局参数"}].concat(JSON.parse(sessionStorage.getItem('nacosService'))),
                columns: [
                    {title: '序号', key: 'index', width: '7%', align: 'center', scopedSlots: {customRender: 'index'}},
                    {title: '参数代码', dataIndex: 'code', key: 'code'},
                    {title: '参数名称', dataIndex: 'paramName', key: 'paramName'},
                    {title: '参数值', dataIndex: 'paramValue', key: 'paramValue'},
                    {title: '备注', dataIndex: 'description', key: 'description'},
                    {title: '操作', key: 'operation', width: '13%', scopedSlots: {customRender: 'operation'}}
                ],
            }
        },
        computed: {
            getTabList () {
                return this.$store.state.sysConfigs.tabList
            },
            ...mapState ({
                pageVal: state => state.sysConfigs.page,
                getTab: state => state.sysConfigs.getTab,
                tabListTable: state => state.sysConfigs.tabListTable
            })
        },
        watch: {
            getTab () {
                //this.currentTabName = this.getTabList[ 0 ].value
                this.init ()
            },
            tabListTable ( val ) {
                this.tableListData = val
            }
        },
        methods: {
            /**
             * Function    : initTabList
             * Description : 获取系统参数tab分类
             * Input       : none
             * Return      : none
             */
            initTabList () {
                this.$store.dispatch ('loadSysConfigSortsAct')
            },

            /**
             * Function    : init
             * Description : 初始化列表
             * Input       : none
             * Return      : none
             */
            init () {
                let para = Object.assign ({},
                    {sortCode: this.currentTabName}, this.page)
                this.$store.dispatch ('findSysConfigsAct', para)
            },
            /**
             * Function    : addSysConfig
             * Description : 新增系统参数
             * Input       : none
             * Return      : none
             */
            addSysConfig () {
                console.log(this.nacosService)
                console.log(this.currentTabName)
                let someList = this.nacosService.filter (item => {
                    if (item.serverCode === this.currentTabName) {
                        return item
                    }
                })
                console.log(someList)
                if (someList.length > 0) {
                    this.sysSetting = {
                        sortCode: this.currentTabName,
                        sortName: someList[ 0 ].label,
                        paramName: '',
                        paramValue: '',
                        paramUnit: '',
                        description: ''
                    }
                    this.title = true
                    this.$refs.addEdit.showModal ()
                }
            },
            editSysConfig ( text ) {
                this.showAddTable = true
                this.$refs.addEdit.showEdit (text)
                this.title = false
            },
            /**
             * Function    : checkCol
             * Description : 选择框事件
             * Input       : sel 选择数据集合
             * Return      : none
             */
            checkCol ( sel ) {
                let check = []
                sel.forEach (( item, index ) => {
                    check.push (item)
                })
                this.checkData = check
            },
            /**
             * Function    : delSysConfig
             * Description : 删除系统配置
             * Input       : id：系统参数主键 systemName：系统参数名称
             * Return      : none
             */
            delSysConfig ( id, systemName ) {
                this.$confirm ({
                    title: `确定删除${systemName}系统参数信息吗?`,
                    onOk: () => {
                        let _this = this
                        this.$store.dispatch ('delSysConfigAct', {id: id}).then (response => {
                            if (response.code === 0) {
                                if (1 === _this.tableListData.length && _this.pageVal.currentPage > 1) {
                                    _this.page.currentPage = _this.pageVal.currentPage - 1
                                }
                                this.$message.success (response.message)
                            } else {
                                this.$message.error (response.message)
                            }
                            this.init ()
                            this.ids = ''
                        })
                    },
                    onCancel: () => {
                    }
                })
            },

            /**
             * Function    : changePage
             * Description : 切换页码
             * Input       : val 切换的页码
             * Return      : none
             */
            changePage ( val ) {
                this.page.currentPage = val
                this.init ()
            },

            /**
             * Function    : changePageSize
             * Description : 切换页面条数
             * Input       : val 切换的页面条数
             * Return      : none
             */
            changePageSize ( vm ) {
                this.page.pageSize = vm
                this.page.currentPage = 1
                this.init ()
            },

            /**
             * Function    : changeTab
             * Description : 切换tab页触发函数
             * Input       : name tab页名称
             * Return      : none
             */
            changeTab ( name ) {
                this.currentTabName = name
                this.page.serverCode = name
                this.page.currentPage = 1
                this.tableListData = []
                this.init ()
            }
        },

        /**
         * Function    : created
         * Description : 创建 钩子函数
         * Input       : none
         * Return      : none
         */
        created () {
            this.editBtnShow = this.hasPermission ('sysconfig:updSysConfig')
            this.delBtnShow = this.hasPermission ('sysconfig:delSysConfig')
            if (!this.editBtnShow && !this.delBtnShow) {
                this.columns = this.columns.splice (0, 5)
            }
            //this.page.serverCode = this.nacosService[0]
            this.nacosService = this.nacosService.filter(item=>item.serverCode!=='sysconf' && item.serverCode!=='audit'&& item.serverCode!=='sysstyle'&& item.serverCode!=='auth')
            this.page.serverCode = 'micrApp'
            this.currentTabName = 'micrApp'
            this.initTabList ()
        },

        /**
         * Function    : destroyed
         * Description : 销毁 钩子函数
         * Input       : none
         * Return      : none
         */
        destroyed () {
            this.$store.commit ('set_getTab', 'false')
        }
    }
</script>
<style lang="less" scoped>
    .apply-title-btn-wrap {
        margin-top: -52px
    }
</style>
